<template>
  <div class="wrap">
    <img src="../assets/loginLogo.png" class="logo" alt />
    <div class="form">
      <div class="item">
        <img src="../assets/loginPhone.png" class="phone" alt />
        <input type="text" v-model="account" placeholder="请输入用户名" />
      </div>
      <div class="item">
        <img src="../assets/pass.png" class="pass" alt />
        <input type="text" v-model="checkCode" placeholder="请输入验证码" />
        <p @click="sendCode">{{ts}}</p>
      </div>
      <div class="item">
        <img src="../assets/pass.png" class="pass" alt />
        <input type="password" v-model="password" placeholder="请输入密码" />
      </div>
      <div class="item">
        <img src="../assets/pass.png" class="pass" alt />
        <input type="password" v-model="checkPass" placeholder="请再次输入密码" />
      </div>
      <p class="w_pass" @click="reLogin">返回登陆</p>
      <div class="btnBox">
        <button class="login" @click="register">注册</button>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.wrap {
  overflow: hidden;
  .logo {
    width: 3.426667rem;
    margin: 1.866667rem auto 1.44rem;
  }
  .item {
    width: 6.733333rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #719bef;
    height: 1.44rem;
    .phone {
      width: 0.533333rem;
      height: 0.533333rem;
      display: block;
    }
    .pass {
      width: 0.466667rem;
      height: 0.533333rem;
      display: block;
    }
    input {
      display: block;
      outline: none;
      border: none;
      flex: 2;
      margin-left: 15px;
      height: 90%;
      color: #719bef;
    }
    p {
      border: 0.5px solid #719bef;
      border-radius: 30px;
      padding: 2px 10px;
      color: #719bef;
      min-width: 80px;
    }
  }
  .w_pass {
    color: #719bef;
    text-align: left;
    width: 6.733333rem;
    margin: 15px auto;
  }
  .btnBox {
    margin-top: 2.053333rem;
    button {
      height: 1.133333rem;
      width: 6.813333rem;
      border: 0.5px solid rgba(113, 155, 239, 1);
      border-radius: 30px;
      background: transparent;
      color: #719bef;
      outline: none;
      font-size: 16px;
    }
    .login {
      color: #fff;
      background: #719bef;
      margin-bottom: 0.733333rem;
    }
  }
}
</style>
<script>
import { Dialog } from "vant";

import { register, sendCode, exist } from "@/utils/interface";
export default {
  data() {
    return {
      account: "",
      password: "",
      checkCode: "",
      checkPass: "",
      ts: "获取验证码",
      bok: true
    };
  },
  created() {
    document.title = "注册";
  },
  methods: {
    reLogin() {
      this.$router.go(-1);
    },
    register() {
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        Dialog.alert({
          message: "手机号码有误，请重填"
        });
        return false;
      }
      if (!this.checkCode) {
        Dialog.alert({
          message: "请输入验证码"
        });
        return false;
      }
      if (!this.password) {
        Dialog.alert({
          message: "请输入密码"
        });
        return false;
      }
      if (this.password.length < 6) {
        Dialog.alert({
          message: "密码不能少于6位"
        });
        return false;
      }
      if (this.password !== this.checkPass) {
        Dialog.alert({
          message: "两次密码输入不一致"
        });
        return false;
      }
      exist({ account: this.account }).then(res => {
        if (res.data.code == 200 && res.data.data == 0) {
          register({
            account: this.account,
            password: this.password,
            checkCode: this.checkCode
          }).then(res => {
            if (res.data.code == 200) {
              Dialog.alert({
                    message: "注册成功,去登陆"
                  }).then(res => {
                    this.$router.go(-1);
                  });
            }
          });
        } else {
          Dialog.alert({
            message: "该账号已经存在,请直接登陆"
          });
        }
      });
    },
    sendCode() {
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        Dialog.alert({
          message: "手机号码有误，请重填"
        });

        return false;
      }
      if (!this.bok) {
        return false;
      }
      this.bok = false;
      exist({ account: this.account }).then(res => {
        if (res.data.code == 200 && res.data.data == 0) {
          sendCode({
            account: this.account
          }).then(res => {
            let n = 60;
            let timer = setInterval(() => {
              n--;
              this.ts = `${n}秒后重试`;
              if (n <= 0) {
                clearInterval(timer);
                this.ts = "重新获取";
                this.bok = true;
              }
            }, 1000);
          });
        } else {
          this.bok = true;
          Dialog.alert({
            message: "该账号已经存在,请直接登陆"
          });
        }
      });
    }
  }
};
</script>